<!-- 分类列表页 -->
<script>
    import { onMount } from "svelte";
    import router from "../../routes";
    import DataTable, { Head, Body, Row, Cell } from "@smui/data-table";
    import Button from "@smui/button";
    import { Label } from "@smui/common";
    import { Snackbar, Button as MuiButton } from "svelte-mui/src";
    import Dialog, { Title, Content, Actions } from "@smui/dialog";
    import { Row as MateRow, TextField } from "svelte-materialify";

    import {
        getCateList,
        getOneCate,
        addCate,
        editCate,
        deleteCate,
    } from "../../api/category";

    let errAlertVisible = false;
    let errAlertMsg = "error";
    let okAlertVisible = false;
    let okAlertMsg = "success";

    let addCateDialogOpen = false;

    let cateList = [];

    // 弹窗标题
    let modeFormTitle = "添加分类";
    // 新增分类名
    let cateNameForAdd = "";
    // 编辑分类时的id
    let editCateId = null;

    // 生命周期时间，挂载完毕
    onMount(async () => {
        getList();
    });

    // 获取分类列表
    function getList() {
        getCateList()
            .then((res) => {
                if (res.data.code != 200) {
                    console.log(res.data.msg);
                    errAlertMsg = res.data.msg;
                    errAlertVisible = true;
                }

                cateList = res.data.data;
            })
            .catch((err) => {
                console.log(err);
                errAlertMsg = err;
                errAlertVisible = true;
            });
    }

    // 显示添加分类弹窗
    const showAddCateMode = () => {
        modeFormTitle = "添加分类";
        addCateDialogOpen = true;
    };

    // 添加/编辑分类
    const submitAddOrEditCate = () => {
        if (editCateId && editCateId > 0) {
            editCate({ id: editCateId, name: cateNameForAdd })
                .then((res) => {
                    if (res.data.code != 200) {
                        console.log(res.data.msg);
                        errAlertMsg = res.data.msg;
                        errAlertVisible = true;
                    }

                    okAlertMsg = "修改成功";
                    okAlertVisible = true;

                    getList();
                })
                .catch((err) => {
                    console.log(err);
                    errAlertMsg = err;
                    errAlertVisible = true;
                });

            editCateId = null;
            cateNameForAdd = "";
        } else {
            addCate({ name: cateNameForAdd })
                .then((res) => {
                    if (res.data.code != 200) {
                        console.log(res.data.msg);
                        errAlertMsg = res.data.msg;
                        errAlertVisible = true;
                    }

                    okAlertMsg = "添加成功";
                    okAlertVisible = true;
                    getList();
                })
                .catch((err) => {
                    console.log(err);
                    errAlertMsg = err;
                    errAlertVisible = true;
                });

            editCateId = null;
            cateNameForAdd = "";
        }
    };

    // 显示编辑分类弹窗
    const showEditCate = (id) => {
        // console.log("编辑" + id);
        getOneCate(id)
            .then((res) => {
                if (res.data.code != 200) {
                    console.log(res.data.msg);
                    errAlertMsg = res.data.msg;
                    errAlertVisible = true;
                }

                editCateId = res.data.data.id;
                cateNameForAdd = res.data.data.name;
                modeFormTitle = "编辑分类";
                addCateDialogOpen = true;
            })
            .catch((err) => {
                console.log(err);
                errAlertMsg = err;
                errAlertVisible = true;
            });
    };

    // 删除分类
    const deleteArt = (id) => {
        deleteCate(id)
            .then((res) => {
                if (res.data.code != 200) {
                    console.log(res.data.msg);
                    errAlertMsg = res.data.msg;
                    errAlertVisible = true;
                }

                okAlertMsg = "删除成功";
                okAlertVisible = true;
                getList();
            })
            .catch((err) => {
                console.log(err);
                errAlertMsg = err;
                errAlertVisible = true;
            });
    };
</script>

<Snackbar
    color="#f56c6c"
    bg="#fef0f0"
    bind:visible={errAlertVisible}
    timeout={1}
    style="height: 30px; border-radius: 4px;"
>
    {errAlertMsg}
    <span slot="action">
        <MuiButton
            color="#a8abb2"
            on:click={() => {
                errAlertVisible = false;
            }}>✕</MuiButton
        >
    </span>
</Snackbar>
<Snackbar
    color="#67c23a"
    bg="#f0f9eb"
    bind:visible={okAlertVisible}
    timeout={1}
    style="height: 30px; border-radius: 4px;"
>
    {okAlertMsg}
    <span slot="action">
        <MuiButton
            color="#a8abb2"
            on:click={() => {
                okAlertVisible = false;
            }}>✕</MuiButton
        >
    </span>
</Snackbar>

<Dialog
    bind:open={addCateDialogOpen}
    aria-labelledby="event-title"
    aria-describedby="event-content"
>
    <Title id="event-title">{modeFormTitle}</Title>
    <Content id="event-content">
        <!-- 分类名 -->
        <MateRow style="margin: 20px 10px;">
            <TextField clearable bind:value={cateNameForAdd}>分类名</TextField>
        </MateRow>
    </Content>
    <Actions>
        <Button
            action="cancel"
            on:click={() => {
                return false;
            }}
        >
            <Label>取消</Label>
        </Button>
        <Button action="ok" default on:click={submitAddOrEditCate}>
            <Label>提交</Label>
        </Button>
    </Actions>
</Dialog>

<p style="color: #66bb6a;">分类列表</p>

<!-- 添加按钮 -->
<Button class="blue lighten-2" on:click={showAddCateMode}>
    <Label style="color: #fff;">添加</Label>
</Button>

<!-- 分类列表展示 -->
<div class="catelist">
    <DataTable stickyHeader table$aria-label="分类列表" style="width: 100%;">
        <Head>
            <Row>
                <Cell numeric style="width: 5%;">ID</Cell>
                <Cell style="width: 50%;">名称</Cell>
                <Cell style="width: 15%;">创建时间</Cell>
                <Cell style="width: 15%;">修改时间</Cell>
                <Cell style="width: 15%;">操作</Cell>
            </Row>
        </Head>
        <Body>
            {#each cateList as cate (cate.id)}
                <Row>
                    <Cell numeric>{cate.id}</Cell>
                    <Cell>{cate.name}</Cell>
                    <Cell>{cate.createDate}</Cell>
                    <Cell>{cate.lastModifiedDate}</Cell>
                    <Cell
                        ><Button on:click={() => showEditCate(cate.id)}>
                            <Label>编辑</Label>
                        </Button>
                        <Button
                            color="secondary"
                            on:click={() => deleteArt(cate.id)}
                        >
                            <Label>删除</Label>
                        </Button>
                    </Cell>
                </Row>
            {/each}
        </Body>
    </DataTable>
</div>

<style>
    .catelist {
        margin: 10px 0;
        width: 98%;
        text-align: center;
        border-radius: 2px;
    }
</style>
